import React, { Component }  from 'react';
import './nickname.css'
import config from '../../config.js'
import {withRouter} from "react-router-dom";
class Nickname extends Component{
    constructor(props){
        super(props)
        this.state={
            btn:false,
            name:'',
            info:''
        }
    }
    componentWillMount() {
        var info=JSON.parse(sessionStorage.getItem('info'))
        this.setState({
            info:info
        })
    }

    realname(event){
        var name = event.target.value
        console.log(name)
        this.setState({
         name:name   
        })
         if(this.state.name){
           this.setState({
               btn:true
           })
       }
    }
    submit(myhistory){
        var that=this
        console.log(this.state.info)
      if(this.state.btn==true){
           var info=JSON.parse(sessionStorage.getItem('info'))
           var nickname=this.state.name
          var arg={
              uid:info.uid,
              token:info.token,
              nickname:nickname
          }
          console.log(arg)
         config.sendRequest(config.url.changedetail,arg,function(res){
                var info=JSON.parse(sessionStorage.getItem("info"));  
                info.name=nickname;
                sessionStorage.setItem("info",JSON.stringify(info))
                myhistory.push("/list")
         })
      }
    }
    render(){
        var myhistory=this.props.test2.history;
        return (
            <div className={this.props.nickname_active ? 'noactive nickname_toast':'active nickname_toast '}>
                <div className='nickname_title'>昵称</div>
                <div className='text-center'>
                    <input type="text" placeholder='请输入昵称'  className='nickname_input' onChange={(e)=>this.realname(e)}/>
                </div>
                <div className='text-center'>
                    <div className={this.state.btn?'submit submitbtn':'submit'} onClick={()=>this.submit(myhistory)}>确认 </div>
                </div>
            </div>
        )
    }
}

export default withRouter(Nickname);